<template>
  <div class="tag-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="SearchTags" >
          <div class="filter-container">
            <el-row :gutter="20">
              <el-col :span="5">
                <!-- 标签名称输入框 -->
                <el-form-item label="目录名称" prop="catalogs">
                  <el-input
                    style="width: 180px;"
                    class="filter-item"
                    v-model="SearchTags.catalogs"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                 <!-- 状态下拉选择框 -->
                 <el-form-item label="状态" prop="state">
                  <el-select v-model="SearchTags.state" placeholder="请选择">
                    <el-option
                       v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                   </el-option>
                 </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1" :pull="1">
                  <el-button
                  class="filter-item"
                  size="small"
                  @click="clearFn"
                  >清除</el-button>
              </el-col>
              <el-col :span="1" :pull="1">
                 <el-button
                    size="small"
                    type="primary"
                    @click="SearchTagsFn"
                  >搜索</el-button>
              </el-col>
                <el-button
              class="filter-item fr"
              size="small"
              type="success"
              icon="el-icon-edit"
              @click="addFn"
            >新增目录</el-button>
               <el-button
               v-if="subjectID"
                class="filter-item fr"
                size="small"
                type="text"
                style="margin-right: 10px;"
                icon="el-icon-back"
                @click="$router.back()"
                >
                 返回学科
                </el-button>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
         <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 数据列表 -->
        <el-table
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="加载中，请稍后..."
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" label="序号" type="index">
          </el-table-column>
          <el-table-column align="center" label="所属学科">
            <template slot-scope="scope">
              <span>{{scope.row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="目录名称">
            <template slot-scope="scope">
              <span>{{scope.row.directoryName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建者">
            <template slot-scope="scope">
              <span>{{scope.row.creatorID}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期">
            <template slot-scope="scope">
              <span>{{scope.row.addDate}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">已启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
                <el-button type="text" size="mini"
                 @click="buttonOneFn(scope.row.id,scope.row.state)">
                <span v-if="scope.row.state==0">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button
              type="text"
               size="mini"
               @click="buttonTwoFn(scope.row)"
               :disabled="scope.row.state?true:false">修改</el-button>
              <el-button
                size="mini"
                type="text"
                @click="buttonThreeFn(scope.row.id)"
                :disabled="scope.row.state?true:false"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
         <!-- 分页 -->
        <div class="pagination" style="float:right">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(page.page)"
              :total="Number(total)"
              :page-size="Number(page.pagesize)"
              :page-sizes="[10,20,30,50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </el-card>
    </div>
       <!-- 新增目录弹层组件 -->
       <TagsAdd ref="TagsAdd" :showDialog.sync="showDialog" :subjectID="subjectID" @list="list()"/>
  </div>
</template>

<script>
// 引入接口  1.标签列表 2.标签状态修改
import { list, changeState, remove } from '../../api/hmmm/directorys'
// 引入新增目录弹出层
import TagsAdd from '../components/directorys-add.vue'
export default {
  name: 'TagsList',
  data () {
    return {
      // 搜索框表单
      SearchTags: {
        catalogs: null, // 标签名称
        state: null// 状态
      },
      // 表格数据
      dataList: [],
      // 表格数据加载状态
      listLoading: false,
      // 标签状态:
      options: [{
        value: 1,
        label: '已启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      // 分页数据
      page: {
        page: 1, // 当前页数
        pagesize: 10// 页尺寸
      },
      total: '', // 数据总数
      subjectID: Number(this.$route.query.subjectID) || null, // 从学科页面跳转过来的筛选条件
      showDialog: false// 新增标签的显示隐藏
    }
  },
  components: {
    TagsAdd
  },
  computed: {
    // 数据记录
    alertText () {
      return `数据一共${this.total}条`
    }
  },
  created () {
    this.list()// 数据渲染
  },
  methods: {
    // 表格数据渲染的函数
    async list () {
      // 开启加载状态
      this.listLoading = true
      // 调接口
      const res = await list({
        ...this.page,
        tagName: this.SearchTags.catalogs,
        state: this.SearchTags.state,
        subjectID: this.subjectID
      })
      // 数据更新
      this.dataList = res.data.items
      this.total = res.data.counts
      // 关闭加载状态
      this.listLoading = false
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      // pageSize 改变时会触发 回调参数：每页条数 再重新设置size
      this.page.pagesize = val
      if (this.page.page === 1) {
        this.list()// 重新调数据
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      // currentPage 改变时会触发 回调参数:当前页 重新设置当前页
      this.page.page = val
      this.list()// 重新调数据
    },
    // 清除按钮
    clearFn () {
      // 重置搜索数据
      this.SearchTags = {
        catalogs: null,
        state: null
      }
      // 重置页数
      this.page = {
        page: 1,
        pagesize: 10
      }
      // 重新调所有数据
      this.list()
    },
    // 搜索按钮
    SearchTagsFn () {
      // 重置页数回到第一页
      this.page = {
        page: 1,
        pagesize: 10
      }
      this.list()// 重新调接口
    },
    // 新增按钮
    addFn () {
      // 开启弹窗
      this.showDialog = true
    },
    // 点击操作栏的第一个按钮  禁用或者启用
    async buttonOneFn (id, state) {
      // 接受每条数据的id state 调接口进行修改
      const mes = state ? '禁用' : '启用'
      try {
        await this.$confirm(`您确定要${mes}该标签吗？`)
        const { data } = await changeState({ id, state: state ? '0' : '1' })
        data.success ? this.list() : this.$message.waring(`${mes}失败`)
      } catch (err) {
        console.log(err)
      }
    },
    // 点击操作栏的第二个按钮  修改标签
    async buttonTwoFn (row) {
      //  调用子组件方法 实现数据回填
      this.$refs.TagsAdd.formDataBack(row)
      // 开启弹层
      this.showDialog = true
    },
    // 点击操作栏的第三个按钮  删除标签
    async buttonThreeFn (id) {
      await this.$confirm('此操作将永久删除标签 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
      // 调接口
      await remove({ id })
      // 更新视图
      this.list()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin:10px 0;
}
.fr{
  float: right;
  margin-right: 10px;
}
</style>
